
<template>
  <h1>隐藏显示指令</h1>
  <!-- v-if="布尔值" true元素显示，false元素消失
        false表示该元素不会渲染到DOM中，直接跳过该元素的渲染 -->
  <p v-if="true">张三</p>
  <p v-if="false">李四</p>
  <hr>
  <!-- v-show="布尔值" true元素显示，false元素消失
        false是通过修改CSS属性display:none来让元素消失 -->
  <p v-show="true">小红</p>
  <p v-show="false">小绿</p>
  <hr>
  <p v-if="true">太阳</p>
  <!-- v-else通过找离自己最近的v-if进行取反 v-if="true" 则v-else为false，反之 -->
  <p v-else>月亮</p>
  <hr>
  <!-- 可通过响应式变量来控制-->
  <p v-if="isShow">天空</p>
  <p v-else>海洋</p>
</template>

<script setup>
  import {ref} from "vue";

  const isShow = ref(false);
</script>

<style scoped>

</style>